<template>
  <div class="mysystem">
    <div class="system">
      <p style="margin-bottom:5px;">您可以随时克隆你在吾志写的日记(目前支持html格式)</p>
      <p v-if="isDelete">
        为了减轻服务器压力，24小时只能下裁一次,上次下载时间2021年11月10日16:21
      </p>
      <p @click="clone" style="color:#001dbb;font-weight:bold;" v-if="!isDelete">克隆我的吾志日记>></p>
    </div>
    <div class="form">
      <button @click="deleteUser">× 删除我的吾志账号</button>
    </div>
    <div v-if="isTip" class="myTip">
      <div class="tip">
        <p>您确定要删除在吾志的账号吗，请认真考虑！！</p>
        <div class="btn">
          <button @click="sure">确定</button>
          <button @click="no">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "system",
  data() {
    return {
      isTip: false,
      isDelete: false,
    };
  },
  methods: {
    clone(){
      this.isDelete = true;
    },
    sure() {
      this.$store.state.isLogin = false;

      localStorage.clear("userMsg");
      
      this.isTip = false;
      this.$router.push({ path: "/home/webHomepage" });
      let _data = document.cookie;
      if (_data.includes("isCheck") == false) {
        return false;
      }
      document.cookie = "isCheck=; expires=" + new Date("1970/01/01");
    },
    no() {
      this.isTip = false;
    },
    deleteUser() {
      this.isTip = true;
    },
  },
};
</script>

<style lang="less" scoped>
.mysystem {
  width: 100%;
  position: relative;
  padding-bottom: 40px;
  .system {
    width: 100%;
    padding-top: 25px;
    p {
      line-height: 22px;
      color: #808080;
      &:nth-of-type(2) {
        width: 400px;
        color: #000;
        cursor: pointer;
      }
    }
  }
  .form {
    position: absolute;
    bottom: -30px;
    left: 0;
    button {
      background-color: transparent;
      font-size: 16px;
      color: #808080;
      cursor: pointer;
    }
  }
  .myTip {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    .tip {
      width: 250px;
      position: absolute;
      top: 50%;
      left: 50%;
      background-color: wheat;
      margin-left: -170px;
      margin-top: -100px;
      padding: 20px 20px;
      border-radius: 5px;
      p {
        line-height: 22px;
        margin: 10px 0;
      }
      .btn {
        display: flex;
        justify-content: center;
        button {
          margin: 0 10px;
          font-size: 14px;
          border-radius: 5px;
          color: #ccc;
          cursor: pointer;
          &:nth-of-type(1) {
            color: red;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>